<template>
  <div id="app">
    <h1>VUEX学习{{ msg }}</h1>
    <input type="text" :value="inputValue" @input="changeValue($event)" />
    <button @click="handleClickAddNewDate">添加事项</button>
    <p v-for="(item, index) in infoList" :key="index">
      <input
        type="checkbox"
        :checked="item.done"
        @change="
          (e) => {
            handleClickChangeCheckbox(e, item.id);
          }
        "
      />
      <mark>{{ item.info }}</mark>
      <button @click="delItem(item.id)">删除</button>
    </p>
    <footer>
      <span>未完成的任务数量:{{ unDone }}</span>
      <button @click="clearFinishTask">清除已完成的任务</button>
      <div class="btn-group">
        <span
          @click="fillShift('全部')"
          :class="{ active: activeName === '全部' }"
          >全部</span
        >
        <span
          @click="fillShift('未完成')"
          :class="{ active: activeName === '未完成' }"
          >未完成</span
        >
        <span
          @click="fillShift('已完成')"
          :class="{ active: activeName === '已完成' }"
          >已完成</span
        >
      </div>
    </footer>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "app",
  data() {
    return {
      msg: "这里是App组件",
    };
  },
  computed: {
    ...mapState(["list", "inputValue", "activeName"]),
    ...mapGetters(["unDone", "infoList"]),
  },
  created() {
    this.getList();
  },
  methods: {
    ...mapMutations([
      "clearInput",
      "changeValue",
      "addNewDate",
      "delItem",
      "changeCheckbox",
      "clearFinishTask",
      "fillShift",
    ]),
    ...mapActions(["getList"]),
    handleClickAddNewDate() {
      if (this.inputValue.trim().length == 0) {
        alert("输入不能为空");
      } else {
        this.addNewDate();
        this.clearInput();
      }
    },
    handleClickChangeCheckbox(e, id) {
      this.changeCheckbox({
        bool: e.target.checked,
        checkboxId: id,
      });
    },
  },
};
</script>
<style scoped>
.btn-group span.active {
  background-color: red;
  color: #fff;
  font-size: 20px;
}
</style>